import React from 'react';
import $ from 'jquery';
import { Pagination} from 'element-react';
import Detialchild from '../Components/detailchild'
import Axios from 'axios';
class Songdetail extends React.Component{
    constructor(props){
        super(props);
        this.state={
            res:'',
            len:0,
        }
    }
     onCurrentChange(currentPage){
		Axios({
			method:'post',
			url:'http://10.31.160.62:3000/getcomment',
            data:{page:currentPage},
			dataType:'json'
		}).then((res)=>{
            this.setState({
                res:res.data.msg
            })
        })
    }
    componentWillMount(){
        var that = this;
        $.ajax({
            type:'post',
            url:'http://10.31.160.62:3000/getcomment',
            data:{
                page:1
            },
            dataType:'json',
        }).done(function(res){
            var _res = res.msg;
            var len =  res.total;
            if(_res){
                that.setState({
                    res:_res,
                    len:len,
                })
            }
        })
    }
    render(){
        var _res = this.state.res;
        var html=[];
        var len = this.state.len;
        if(_res){
            for(var i=0;i<_res.length;i++){
                html.push(
                    <Detialchild key={i} {..._res[i]}/>
                )
            }
        }
        return(
          <div className="main_s">
            <div className="mod_data_s">
                <span className="data__cover_s">
                    <img src="../src/images/detail/T002R300x300M0000025Y3Wa1BaFAI.jpg" className="data__photo_s"/>
                </span>
                <div className="data__cont_s">
                    <div className="data__name_s">
                        <h1 className="data__name_txt_s">等我回家 (Live)</h1>
                    </div>
                    <div className="data__singer_s">
                        <i className="icon_singer_s"></i>
                        <a href="##" className="data__singer_txt js_singer_s"> 薛之谦 </a>
                        <span className="data__singer_line_s">/</span>
                        <a href="##" className="data__singer_txt js_singer_s"> 王栎鑫 </a>
                    </div>
                    <ul className="data__info_s">
                        <li className="data_info__item_s">
                            专辑：
                            <a href="## " className="js_album_s">金曲捞 第11期</a>
                        </li>
                        <li className="data_info__item_s data_info__item--even_s js_lan_s">语种：国语</li>
                        <li className="data_info__item_s js_genre_s">流派：Pop 流行</li>
                        <li className="data_info__item_s data_info__item--even_s js_company_s">
                            发行公司：
                            <a href="##">北京万象传媒广告有限公司</a>
                        </li>
                        <li className="data_info__item_s js_public_time_s">发行时间：2017-06-23</li>
                    </ul>
                    <div className="data__actions_s">
                        <a href="##" className="mod_btn_green_s js_all_play_s">
                            <i className="mod_btn_green__icon_play_s"></i>
                            播放
                        </a>
                        <a href="javascript:;" className="mod_btn_s js_all_like_s">
                            <i className="mod_btn__icon_like_s"></i>
                            收藏
                        </a>
                        <a href="javascript:;" className="mod_btn js_more_s">
                            <i className="mod_btn__icon_menu_s"></i>
                            更多
                        </a>
                    </div>
                </div>
            </div>
            <div className="jbjb">
                    <div className="detail_layout_s">
                <div className="comment_box_mao">
                <div className="comment_mao">
                    <h4 className="comment">评论</h4>
                    {/*<span className="comment_num">共<i className="com_num">1829</i>条评论</span>*/}
                </div>
                <div className="m-cmmt">
                    <div className="iptarea">
                        <div className="head">
                            <img src="../src/images/detail/default_avatar.jpg" alt="" />
                        </div>
                        <div className="j-flag">
                            <div>
                                <div className="m-cmmtipt f-cb f-pr">
                                    <div className="u-txtwrap holder-parent f-pr">
                                        <textarea className="u-txt area j-flag" />
                                    </div>
                                    <div className="btns f-cb f-pr">
                                        <i className="icn u-icn u-icn-36 j-flag"></i>
                                        <i className="icn u-icn u-icn-41 j-flag"></i>
                                        <a href="javascript:;" className=" u-btn u-btn-1 " id="mby">评论</a>
                                        <span className="zs s-fc4 j-flag">140</span>
                                    </div>
                                    <div className="corr u-arr">
                                        <em className="arrline">◆</em>
                                        <span className="arrclr">◆</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="cmmts j-flag">
                        <h3 className="u-hd4">精彩评论</h3>
                        {html}
                        <div className="ybfy"><Pagination layout="prev, pager, next" total={len} pageSize={5} small={true} onCurrentChange={this.onCurrentChange.bind(this)} className="detail" /></div>
                    </div>
                </div>
            </div>
           
          
            </div>
		</div>
		
			
	</div>
        )
    }
    componentDidMount(){
        var date = new Date();
        var time = date.toLocaleString();
        var id = localStorage.getItem('id');
        var msg = '';
       $('.u-txt').on('blur',function(){
           msg = $(this).val();
       })
        $('#mby').on('click',function(){
             if(id==null){
                alert('请先登录账号！');
            }else{
                 $.ajax({
                    type:'post',
                    url:'http://10.31.160.62:3000/addcomment',
                    data:{
                        id:id,
                        msg:msg,
                        time:time
                    }
                }).done(function(d){
                    if(d.msg){
                        window.location.href='/songdetail';
                    }
                    
                })
            }
        })
    }
}

export default Songdetail;